<template>
  <div class="category-detail">
    <div v-if="loading" class="text-center">
      <div class="spinner-border" role="status">
        <span class="visually-hidden">加载中...</span>
      </div>
    </div>
    
    <div v-else-if="error" class="alert alert-danger">
      {{ error }}
    </div>
    
    <div v-else-if="category">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><router-link to="/">首页</router-link></li>
          <li class="breadcrumb-item active">{{ category.name }}</li>
        </ol>
      </nav>
      
      <div class="card mb-4">
        <div class="card-body">
          <h1 class="card-title">{{ category.name }}</h1>
          <p class="card-text">{{ category.description }}</p>
        </div>
      </div>
      
      <h2 class="mb-4">分类下的文章</h2>
      
      <div v-if="articles.length > 0">
        <div v-for="article in articles" :key="article.id" class="card mb-3">
          <div class="card-body">
            <h5 class="card-title">
              <router-link :to="'/article/' + article.id">{{ article.title }}</router-link>
            </h5>
            <h6 class="card-subtitle mb-2 text-muted">
              <span class="me-2">{{ formatDate(article.createdAt) }}</span>
              <span class="me-2">浏览: {{ article.viewCount }}</span>
            </h6>
            <p class="card-text">{{ article.summary }}</p>
            <router-link :to="'/article/' + article.id" class="btn btn-primary">阅读更多</router-link>
          </div>
        </div>
        
        <!-- 分页 -->
        <Pagination 
          :pagination="pagination" 
          :routeName="'CategoryDetailPaged'"
          :routeParams="{ id: category.id }"
          :ariaLabel="'分类文章分页'"
        />
      </div>
      
      <div v-else class="alert alert-info">
        该分类下暂无文章
      </div>
      
      <div class="mt-4">
        <router-link to="/" class="btn btn-outline-secondary">返回首页</router-link>
      </div>
    </div>
    
    <div v-else class="alert alert-warning">
      分类不存在或已被删除
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import api from '../services/api'
import Pagination from '../components/Pagination.vue'

export default {
  name: 'CategoryDetail',
  components: {
    Pagination
  },
  props: {
    id: {
      type: String,
      required: true
    },
    pageNumber: {
      type: Number,
      default: 1
    }
  },
  setup(props) {
    const category = ref(null)
    const articles = ref([])
    const loading = ref(false)
    const error = ref(null)
    const pagination = ref(null)
    
    const formatDate = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
    }
    
    const fetchData = async () => {
      const pageNumber = props.pageNumber || 1
      
      loading.value = true
      error.value = null
      
      try {
        const response = await api.get(`/api/category/${props.id}/page/${pageNumber}`)
        const result = response.data
        
        if (result && result.category && result.articles) {
          category.value = result.category
          articles.value = result.articles.items || []
          pagination.value = {
            pageNumber: result.articles.pageNumber || pageNumber,
            totalPages: result.articles.totalPages || 1,
            hasPreviousPage: result.articles.hasPreviousPage || false,
            hasNextPage: result.articles.hasNextPage || false,
            totalItems: result.articles.totalItems || 0
          }
        }
      } catch (err) {
        error.value = err.message
        console.error('获取分类文章失败:', err)
      } finally {
        loading.value = false
      }
    }
    
    onMounted(() => {
      fetchData()
    })
    
    watch(() => props.id, () => {
      fetchData()
    })
    
    watch(() => props.pageNumber, () => {
      fetchData()
    })
    
    return {
      category,
      articles,
      loading,
      error,
      pagination,
      formatDate
    }
  }
}
</script>

<style scoped>
.card-title a {
  color: #333;
  text-decoration: none;
}

.card-title a:hover {
  color: #0d6efd;
}

.breadcrumb {
  background-color: transparent;
  padding: 0.75rem 0;
}
</style>